<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-row type="flex" justify="end" style="margin-bottom: 20px">
      <!-- 根据姓名搜索 -->
      <el-col :span="3" style="margin-right: 10px;">
        <el-input v-model.trim="params.name" placeholder="请输入姓名" clearable @clear="getStudentInfo"></el-input>
      </el-col>
      <!-- 根据学号搜索 -->
      <el-col :span="3" style="margin-right: 10px;">
        <el-input v-model.trim="params.stuId" placeholder="请输入学号" clearable @clear="getStudentInfo"></el-input>
      </el-col>
      <!-- 搜索重置按钮 -->
      <el-button type="primary" @click="getStudentInfo" icon="el-icon-search"></el-button>
      <el-button type="primary" @click="reset">重置</el-button>
      <el-button type="primary" @click="addDialog = true;">添加</el-button>
    </el-row>
    <!-- 表格渲染 -->
    <el-table :data="tableData" stripe border v-loading="loading">
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="stuId" label="学号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="sex" label="性别" :formatter="sfktFormate"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="stuClass" label="班级"></el-table-column>
      <el-table-column prop="major" label="专业"></el-table-column>
      <el-table-column prop="department" label="所属学院"></el-table-column>
      <el-table-column prop="admissionDate" label="入院日期">
        <template v-slot="scope">
          {{
            scope.row.admissionDate | date
          }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="家庭地址"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="email" label="邮件"></el-table-column>
      <!-- 操作按钮 -->
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.pageCurrent"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- 添加对话框 -->
    <el-dialog :visible.sync="addDialog" @close="closeDialog">
      <!-- 具体内容 -->
      <el-form :model="DataForm" :rules="rules" ref="DataForm">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="学号" :label-width="formLabelWidth" prop="stuId">
              <el-input v-model="DataForm.stuId" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
              <el-input v-model="DataForm.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
              <el-select v-model="DataForm.sex" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
              <el-input v-model.number="DataForm.age" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
              <el-input v-model="DataForm.phone" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮件" :label-width="formLabelWidth" prop="email">
              <el-input v-model="DataForm.email" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="班级" :label-width="formLabelWidth" prop="stuClass">
              <el-input v-model="DataForm.stuClass" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业" :label-width="formLabelWidth">
              <el-input v-model="DataForm.major" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属学院" :label-width="formLabelWidth">
              <el-input v-model="DataForm.department" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入院日期" :label-width="formLabelWidth">
              <el-date-picker
                v-model="DataForm.admissionDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="家庭地址" :label-width="formLabelWidth">
            <el-input v-model="DataForm.address" autocomplete="off"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col style="display: flex; justify-content: center;">
            <el-form-item>
              <el-button type="primary" @click="submitForm(DataForm)">提交</el-button>
              <el-button @click="resetForm(DataForm)">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog :visible.sync="editDialog" @close="closeDialog">
      <!-- 具体内容 -->
      <el-form :model="DataForm" :rules="rules" ref="DataForm">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="学号" :label-width="formLabelWidth" prop="stuId">
              <el-input v-model="DataForm.stuId" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
              <el-input v-model="DataForm.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
              <el-select v-model="DataForm.sex" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
              <el-input v-model.number="DataForm.age" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
              <el-input v-model="DataForm.phone" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮件" :label-width="formLabelWidth" prop="email">
              <el-input v-model="DataForm.email" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="班级" :label-width="formLabelWidth" prop="stuClass">
              <el-input v-model="DataForm.stuClass" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业" :label-width="formLabelWidth">
              <el-input v-model="DataForm.major" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属学院" :label-width="formLabelWidth">
              <el-input v-model="DataForm.department" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入院日期" :label-width="formLabelWidth">
              <el-date-picker
                v-model="DataForm.admissionDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="家庭地址" :label-width="formLabelWidth">
            <el-input v-model="DataForm.address" autocomplete="off"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col style="display: flex; justify-content: center;">
            <el-form-item>
              <el-button type="primary" @click="editForm(editDataForm)">提交</el-button>
              <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getStudentInfo, deleteStudentInfo, addStudentInfo, updateStudentInfo } from "@/api/studentInfo";
import { Alert } from 'element-ui';
export default {
  data() {
    return {
      dialogType: '添加',
      // 获取到的表格数据
      tableData: [],
      // 总条数
      total: 0,
      // 请求数据要传递的参数
      params: {
        name: "",
        stuId: "",
        id: '',
        // 默认第一页,十条
        pageCurrent: 1,
        pageSize: 10,
      },
      // 加载框默认值
      loading: false,
      // 添加数据
      // 模态框默认关闭
      addDialog: false,
      editDialog: false,
      formLabelWidth: '70px',
      options: [{
        value: 1,
        label: '女'
      }, {
        value: 0,
        label: '男'
      }],
      DataForm: {
        address: "",
        admissionDate: "",
        age: null,
        birthDate: "",
        department: "",
        email: "",
        major: "",
        name: "",
        phone: "",
        sex: null,
        sort: 0,
        stuClass: "",
        stuId: "",
        id: null
      },
      // 表单验证规则
      rules: {
        stuId: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        stuClass: [
          { required: true, message: '请输入班级', trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
          { required: true, message: '请输入邮箱', trigger: 'blur' },
        ],
        phone: [
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: '请输入正确的手机号码'
          },
          { required: true, message: '请输入手机号', trigger: 'blur' },

        ],
      }
    };
  },
  created() {
    this.getStudentInfo();
    console.log(this.options);
  },
  methods: {
    // 格式化性别
    sfktFormate(row, index) {
      if (row.sex == 0) {
        return "男";
      } else if (row.sex == 1) {
        return "女";
      }
    },
    // 分页
    // 监听页码变化
    handleCurrentChange(newPage) {
      this.params.pageCurrent = newPage
      this.getStudentInfo()
    },
    // 监听size变化
    handleSizeChange(newSize) {
      this.params.pageSize = newSize
      this.getStudentInfo()
    },
    // 获取学生信息
    async getStudentInfo() {
      await getStudentInfo(this.params)
        .then((res) => {
          if (res.code === "200") {
            console.log(res);
            this.loading = true;
            setTimeout(() => {
              this.tableData = res.data.records;
              // 把total转为number类型
              this.total = Number(res.data.total)
              this.loading = false;
            }, 200)
          }
        })
        .catch((error) => { this.$message.error(error) })
    },
    // 删除学生信息
    async handleDelete(index, row) {
      const confirm = await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      if (confirm !== 'confirm') {
        return this.$message.info("已取消删除")
      }
      // 确定删除
      deleteStudentInfo(row.id).then((res) => {
        if (res.code !== "200") {
          this.$message.error("删除失败")
        } else {
          this.$message.success("删除成功")
          this.getStudentInfo();
        }
      })
    },
    // 打开编辑学生对话框
    handleEdit(index, row) {
      // 打开对话库
      this.editDialog = true
      // 根据id获取
      this.DataForm = JSON.parse(JSON.stringify(row))
    },
    // 编辑学生信息提交
    editForm() {
      // 先做表单验证
      this.$refs.DataForm.validate(async valid => {
        if (valid) {
          updateStudentInfo(this.DataForm).then((res) => {
            if (res.code === '200') {
              this.editDialog = false
              this.getStudentInfo();
              this.$message.success('修改成功')
              this.DataForm = {}
            } else {
              this.$message.error('修改失败')
              return false;
            }
          }).catch((error) => {
            this.$message.error(error)
          })
        }
      })
    },
    // 添加学生信息
    submitForm() {
      // 先做表单验证
      this.$refs.DataForm.validate(async valid => {
        if (valid) {
          // 发起请求
          await addStudentInfo(this.DataForm).then((res) => {
            if (res.code === '200') {
              // 关闭模态框
              this.addDialog = false
              this.getStudentInfo();
              this.$message.success('添加成功')
              this.DataForm = {}
            } else {
              this.$message.error('添加失败')
              return false;
            }
          }).catch((error) => {
            this.$message.error(error)
          })
        }
      })
    },
    // 重置添加,编辑对话框,数据,验证都清空
    resetForm() {
      this.DataForm = {}
      this.$refs.DataForm.resetFields();
    },
    // 关闭对话框清空表单
    closeDialog() {
      this.DataForm = {}
      this.$refs.DataForm.resetFields();
    },
    // 搜索重置按钮
    async reset() {
      this.params.stuId = "";
      this.params.name = "";
      await getStudentInfo(this.params).then((res) => {
        this.loading = true;
        setTimeout(() => {
          this.tableData = res.data.records;
          this.loading = false;
        }, 200);
      });
    },

  },
};
</script>
<style lang="">
</style>